<script setup>
import { ref } from "vue";
import { useRouter } from "vue-router";
import { saveSupplier } from "@/api/supplier.js";
import { ElMessage } from "element-plus";
import { checkUser } from "@/api/sysuser.js";
import { Plus } from "@element-plus/icons-vue";
import host from "@/utils/env.js";

const imageUrl = ref("");
const imageUrlLogo = ref("");
//路由实例
const router = useRouter();

//省市区选择
const areaoptions = ref([
  {
    value: "选项1",
    label: "一区"
  },
  {
    value: "选项2",
    label: "二区"
  },
  {
    value: "选项3",
    label: "三区"
  },
  {
    value: "选项4",
    label: "四区"
  },
  {
    value: "选项5",
    label: "五区"
  }
]);
//产品分类
const fenlei = ref([
  {
    value: "1",
    label: "一类"
  },
  {
    value: "2",
    label: "二类"
  },
  {
    value: "3",
    label: "三类"
  },
  {
    value: "4",
    label: "四类"
  },
  {
    value: "5",
    label: "五类"
  }
]);

// //国家选项
// const countryOptions = ref([]);

//表单对象
const supplier = ref({
  account: "",
  accountNumber: "",
  address: "",
  area: "",
  bankName: "",
  boosNub: "",
  boss: "",
  companyName: "",
  describes: "",
  factor: "",
  financeContact: "",
  financeEmail: "",
  financeNub: "",
  license: "",
  logo: "",
  material_id: "",
  name: "",
  password: "",
  remarks: "",
  s_category_id: "",
  salesContact: "",
  salesEmail: "",
  salesNub: "",
  taxIdentificationNumber: ""
});

//验证规则
const rules = ref({
  account: [{ required: true, message: "请输入账号", trigger: "blur" }],
  password: [{ required: true, message: "请输入密码", trigger: "blur" }],
  name: [{ required: true, message: "请输入公司名称", trigger: "blur" }]
});
//验证账号是否存在
async function chk() {
  if (supplier.value.account == "") {
    ElMessage({
      message: "账号不能为空！",
      type: "warning"
    });
    return;
  }

  let res = await checkUser(supplier.value.account);
  if (res.code == 200) {
    ElMessage({
      message: "账号已存在！",
      type: "warning"
    });
    return;
  }
}

//表单引用
const addForm = ref();
//可以生产的材料种类
const checkList = ref([
  // "Mn13Cr2",
  // "Mn18Cr2",
  // "Mn22Cr2",
  // "高碳高耐磨金刚加陶瓷（合金12#）",
  // "高碳高耐磨cr26加陶瓷",
  // "地毯耐磨合金钢加陶瓷（合金钢11#）",
  // "地毯耐磨Cr26加陶瓷 ",
  // "高碳高耐磨Cr28加陶瓷",
  // "合金钢",
  // "高碳高耐磨Cr26",
  // "高铭铸铁KmTBCr26Mo0.5"
]);

//取消
function close() {
  router.push("/supplier/list");
}

//保存
async function save() {
  let valid = addForm.value.validate(() => {
    //表单验证
    if (!valid) return;
  });
  supplier.value.checkList = checkList.value.join("");

  //保存
  let res = await saveSupplier(supplier.value);
  if (res.code == 200) {
    ElMessage({
      message: "保存成功！",
      type: "success"
    });
    console.log();
  }
}
//上传前营业执照
const beforeAvatarUpload = rawFile => {
  if (rawFile.type !== "image/jpeg") {
    ElMessage.error("请选择jpg格式");
    return false;
  } else if (rawFile.size / 1024 / 1024 > 10) {
    ElMessage.error("图片不能超过10M!");
    return false;
  }
  return true;
};

//上传成功营业执照
const handleAvatarSuccess = (response, uploadFile) => {
  if (response.code == 200) {
    //显示图片
    imageUrl.value = URL.createObjectURL(uploadFile.raw);
    //更改图片地址
    product.value.fengmian = response.data;
  }
};

//上传前logo
const beforeAvatarUploadlogo = rawFile => {
  if (rawFile.type !== "image/jpeg") {
    ElMessage.error("请选择jpg格式");
    return false;
  } else if (rawFile.size / 1024 / 1024 > 10) {
    ElMessage.error("图片不能超过10M!");
    return false;
  }
  return true;
};

//上传成功logo
const handleAvatarSuccesslogo = (response, uploadFile) => {
  if (response.code == 200) {
    //显示图片
    imageUrlLogo.value = URL.createObjectURL(uploadFile.raw);
    //更改图片地址
    product.value.fengmian = response.data;
  }
};
</script>

<template>
  <div>
    <!--  基础信息-->
    <div>
      <el-form
        ref="addForm"
        :rules="rules"
        :model="supplier"
        label-width="auto"
        style="
          max-width: 1000px;
          margin: auto;
          background-color: #fff;
          padding: 20px;
        "
      >
        <div
          style="
            background-color: #cfcece;
            height: 40px;
            line-height: 40px;
            border-bottom: solid 1px #424040;
            margin-bottom: 20px;
          "
        >
          基础信息
        </div>
        <el-row>
          <el-col :span="12">
            <el-form-item label="登录账号:" prop="account" @blur="chk">
              <el-input
                v-model:="supplier.account"
                type="account"
                class="ipt"
                placeholder="请输入"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="密码:" prop="password">
              <el-input
                v-model:="supplier.password"
                type="password"
                class="ipt"
                placeholder="请输入"
              />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="供应商公司名称:" prop="name">
              <el-input v-model:="supplier.name" placeholder="请输入" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="地区:">
              <el-select v-model:="supplier.area" placeholder="省市区">
                <el-option
                  v-for="item in areaoptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="地址:">
              <el-input v-model:="supplier.address" placeholder="请输入" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="公司简介:">
              <!--            <textarea rows="5" cols="100" />-->
              <el-input v-model:="supplier.describes" placeholder="请输入" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="主营产品分类:">
              <el-select
                v-model:="supplier.s_category_id"
                placeholder="下拉选择产品分类，二级分类，多选"
              >
                <el-option
                  v-for="item in fenlei"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="报价系数:">
              <el-input v-model:="supplier.factor" placeholder="请输入" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="可以生产的材质种类:">
              <el-checkbox-group v-model="checkList">
                <el-checkbox label="Mn13Cr2" value="Mn13Cr2" />
                <el-checkbox label="Mn18Cr2" value="Mn18Cr2" />
                <el-checkbox label="Mn22Cr2" value="Mn22Cr2" />
                <el-checkbox
                  label="高碳高耐磨金刚加陶瓷（合金12#）"
                  value="高碳高耐磨金刚加陶瓷（合金12#）"
                />
                <el-checkbox
                  label="高碳高耐磨cr26加陶瓷"
                  value="高碳高耐磨cr26加陶瓷"
                />
                <el-checkbox
                  label="地毯耐磨合金钢加陶瓷（合金钢11#）"
                  value="地毯耐磨合金钢加陶瓷（合金钢11#）"
                />
                <el-checkbox
                  label="地毯耐磨Cr26加陶瓷 "
                  value="地毯耐磨Cr26加陶瓷"
                />
                <el-checkbox
                  label="高碳高耐磨Cr28加陶瓷"
                  value="高碳高耐磨Cr28加陶瓷"
                />
                <el-checkbox label="合金钢" value="合金钢" />
                <el-checkbox label="高碳高耐磨Cr26" value="高碳高耐磨Cr26" />
                <el-checkbox
                  label="高铭铸铁KmTBCr26Mo0.5"
                  value="高铭铸铁KmTBCr26Mo0.5"
                />
                <el-checkbox
                  label="高碳高耐磨合金钢"
                  value="高碳高耐磨合金钢.5"
                />
                <el-checkbox label="TiC材质" value="TiC材质" />
                <el-checkbox label="8.8级" value="8.8级" />
                <el-checkbox label="10.9级" value="10.9级" />
                <el-checkbox label="12，9级" value="12，9级" />
              </el-checkbox-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="营业执照:">
              <el-upload
                class="avatar-uploader"
                :action="host + '/upload'"
                :show-file-list="false"
                :before-upload="beforeAvatarUpload"
                :on-success="handleAvatarSuccess"
              >
                <img v-if="imageUrl" :src="imageUrl" class="avatar" />
                <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
              </el-upload>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="logo:">
              <el-upload
                class="avatar-uploader"
                :action="host + '/upload'"
                :show-file-list="false"
                :before-upload="beforeAvatarUploadlogo"
                :on-success="handleAvatarSuccesslogo"
              >
                <img v-if="imageUrlLogo" :src="imageUrlLogo" class="avatar" />
                <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
              </el-upload>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <!--联系人信息-->
    <div>
      <el-form
        :model="form"
        label-width="auto"
        style="
          max-width: 1000px;
          margin: auto;
          background-color: #fff;
          padding: 20px;
        "
      >
        <div
          style="
            background-color: #cfcece;
            height: 40px;
            line-height: 40px;
            border-bottom: solid 1px #424040;
            margin-bottom: 20px;
          "
        >
          联系人信息
        </div>
        <el-row>
          <el-col :span="12">
            <el-form-item prop="salesContact" label="销售联系人:">
              <el-input
                v-model="supplier.salesContact"
                type="salesContact"
                class="ipt"
                placeholder="请输入"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="salesNub" label="销售联系电话:">
              <el-input
                v-model="supplier.salesNub"
                type="salesNub"
                class="ipt"
                placeholder="请输入"
              />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="销售邮箱:">
              <el-input v-model="supplier.salesEmail" placeholder="请输入" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="老板联系人:">
              <el-input v-model="supplier.boss" placeholder="请输入" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="老板联系电话:">
              <el-input v-model="supplier.boosNub" placeholder="请输入" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="财务联系人:">
              <!--            <textarea rows="5" cols="100" />-->
              <el-input
                v-model="supplier.financeContact"
                placeholder="请输入"
              />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="财务联系电话:">
              <el-input v-model="supplier.financeNub" placeholder="请输入" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="财务邮箱:">
              <el-input v-model="supplier.financeEmail" placeholder="请输入" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <!--  收付款信息-->
    <div>
      <el-form
        :model="form"
        label-width="auto"
        style="
          max-width: 1000px;
          margin: auto;
          background-color: #fff;
          padding: 20px;
        "
      >
        <div
          style="
            background-color: #cfcece;
            height: 40px;
            line-height: 40px;
            border-bottom: solid 1px #424040;
            margin-bottom: 20px;
          "
        >
          收付款信息
        </div>
        <el-row>
          <el-col :span="12">
            <el-form-item label="开户银行:">
              <el-input v-model="supplier.bankName" placeholder="请输入" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="收款账号:">
              <el-input v-model="supplier.accountNumber" placeholder="请输入" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <!--  开票信息-->
    <div>
      <el-form
        :model="form"
        label-width="auto"
        style="
          max-width: 1000px;
          margin: auto;
          background-color: #fff;
          padding: 20px;
        "
      >
        <div
          style="
            background-color: #cfcece;
            height: 40px;
            line-height: 40px;
            border-bottom: solid 1px #424040;
            margin-bottom: 20px;
          "
        >
          开票信息
        </div>
        <el-row>
          <el-col :span="12">
            <el-form-item label="公司名称:">
              <el-input v-model="supplier.companyName" placeholder="请输入" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="纳税识别号:">
              <el-input
                v-model="supplier.taxIdentificationNumber"
                placeholder="请输入"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="备注:">
              <el-input v-model="supplier.remarks" placeholder="请输入" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <!--  运费条款-->
    <div>
      <el-form
        :model="form"
        label-width="auto"
        style="
          max-width: 1000px;
          margin: auto;
          background-color: #fff;
          padding: 20px;
        "
      >
        <div
          style="
            background-color: #cfcece;
            height: 40px;
            line-height: 40px;
            border-bottom: solid 1px #424040;
            margin-bottom: 20px;
          "
        >
          运费条款
        </div>
        <el-row>
          <el-col :span="12">
            <el-form-item label="是否含运费:">
              <el-radio-group>
                <el-radio label="是">是</el-radio>
                <el-radio label="否">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="是否含进仓费:">
              <el-radio-group>
                <el-radio label="是">是</el-radio>
                <el-radio label="否">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="产品参数支持:">
              <el-radio-group>
                <el-radio value="0">需要审核</el-radio>
                <el-radio value="1">无需审核</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div style="text-align: center; margin: 20px">
      <el-button type="primary" @click="save">保存</el-button>
      <el-button type="info" @click="close">取消</el-button>
    </div>
  </div>
</template>

<style scoped>
:deep(.avatar-uploader .avatar) {
  width: 108px;
  height: 108px;
  display: block;
}

:deep(.avatar-uploader .el-upload) {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

:deep(.avatar-uploader .el-upload:hover) {
  border-color: var(--el-color-primary);
}

:deep(.el-icon.avatar-uploader-icon) {
  font-size: 28px;
  color: #8c939d;
  width: 108px;
  height: 108px;
  text-align: center;
}
</style>
